<template>
	<view class="content">
		<projectSelect @go="go" v-if="type === 'center'"></projectSelect>
		<zrrSelect v-if="showUser" :single="true" :list="userList" @cancelConfirm="closeUser" @onConfirm="onConfirm"></zrrSelect>
		<view style="position: absolute;z-index: 10076;background-color: #FFFFFF;width: 100%;">
			<u-picker
				:show="showType"
				keyName="dict_label"
				:columns="typeList"
				closeOnClickOverlay
				@cancel="showType = false"
				@close="showType = false"
				@confirm="_setCurType"
			></u-picker>
		</view>

		<view :class="`section-0 ${type === 'center' ? 'center-section-0' : ''}`">
			<view class="section-body">
				<view class="top-tab" v-if="type !== 'center'">
					<view :class="`item ${curTab.id === item.id ? 'item__active' : ''}`" @click="setCurTab(item)" v-for="item in tabList" :key="item.id">
						{{ item.name }}
						<view class="shape"></view>
					</view>
				</view>
				<view class="problem-container">
					<view class="title">
						问题
						<view class="shape"></view>
					</view>
					<view class="action" v-if="curTab.id === 1 || type === 'center'" @click="handleShowQuestion()">
						<text class="iconfont icon-jiahao"></text>
						添加
					</view>
				</view>
			</view>
		</view>

		<u-popup mode="center" :show="showQuestion" @close="closeQuestionPop" :round="50">
			<view class="pop project-pop">
				<view class="title">
					<text>问题详情</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="section-1">
							<view class="form-item upload-wrap">
								<view class="label">现场照片</view>
								<u-upload
									:fileList="fileList"
									:previewFullImage="true"
									@afterRead="afterRead"
									@delete="deletePic"
									multiple
									:maxCount="6"
									:style="{
										position: 'relative',
										height: fileList.length == 0 ? '44rpx' : 'unset',
										border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none',
										borderRadius: '20rpx'
									}"
								>
									<view class="iconfont icon-tupian"></view>
								</u-upload>
							</view>
							<view class="form-item">
								<view class="label">问题描述</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入问题描述" v-model="form.check_content"></u--input>
								</view>
							</view>
							<view class="form-item" v-if="three">
								<view class="label">问题类型</view>
								<!-- <u-radio-group v-model="form.check_type_name" @change="groupChange" -->
								<u-radio-group v-model="form.check_type_name" @change="groupChange" iconPlacement="left">
									<u-radio
										style="margin-right: 15px;"
										v-for="item in radiolist"
										:key="item.id"
										:label="item.name"
										:name="item.name"
										@change="radioChange(item.id)"
										activeColor="#1534ce"
										iconSize="8"
										size="10"
									></u-radio>
								</u-radio-group>
							</view>
							<view class="form-item" v-if="two == 2">
								<view class="label">违章等级</view>
								<view class="picker" @click="showType = true">
									<text>{{ curType }}</text>
									<text class="iconfont icon-xiala"></text>
								</view>
							</view>
							<view class="form-item" v-if="two == 2">
								<view class="label">违章库</view>
								<view class="input" @click="weizhangList()">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请选择违章库" readonly v-model="form.peccancy_content"></u--input>
								</view>
							</view>

							<view class="form-item">
								<view class="label">责任人</view>
								<view class="input" @click="showUser = true">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入责任人" v-model="form.zrr_name"></u--input>
								</view>
							</view>

							<!-- <view class="form-item">
								<view class="label">责任人</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body"
										placeholder="请输入责任人" v-model="form.zrr_name"></u--input>
								</view>
							</view> -->

							<view class="form-item">
								<view class="label">罚款</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入罚款" v-model="form.fk_money"></u--input>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="submit">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showHistory" @close="showHistory = false" :round="50">
			<view class="pop problem-pop">
				<view class="title">
					<text>历史记录</text>
				</view>
				<view class="body">
					<mescroll-uni ref="mescrollRef" height="980" :fixed="false" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{ use: false }">
						<view class="problem-list">
							<problemItem v-for="item in historyList" :item="item" :key="item.id"></problemItem>
							<!-- <view class="item" v-for="item in historyList">
								<view class="project">{{item.code}}.{{item.project_name}}</view>
								<view class="img">
									<image mode="aspectFill" :src="item.file_path ? item.file_path.replace(/\\/g,'/') : ''"></image>
									<view class="problem-title">{{item.check_content}}</view>
								</view>
								<view class="info">
									<view class="info-item">
										<view class="label">类型</view>
										<view class="value">{{item.check_type == 1 ? '质量问题' : '安全问题'}}</view>
									</view>
									<view class="info-item">
										<view class="label">违章库</view>
										<view class="value">{{item.peccancy_type}}</view>
									</view>
									<view class="info-item">
										<view class="label">责任人</view>
										<view class="value">{{item.zrr_name}}</view>
									</view>
									<view class="info-item">
										<view class="label">罚款</view>
										<view class="value">{{item.fk_money}}</view>
									</view>
								</view>
							</view> -->
						</view>
					</mescroll-uni>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showPeccancy" @close="closePeccancy" :round="50">
			<view style="height: 86vh;">
				<view class="pop user-pop">
					<view class="title">
						<text>请选择违章库</text>
					</view>
					<view class="form">
						<!-- <formArea :value="form.city" :labelWidth="134"  @onChange="(e) => form.city = e"></formArea> -->
						<view class="form-item2">
							<view class="label">违章库名称</view>
							<view class="shape"></view>
							<view class="input">
								<u--input placeholderClass="input-placeholder" class="input-body" v-model="project_name"></u--input>
							</view>
						</view>
						<view class="actions">
							<view class="action" @click="project_rep()">
								<text>重</text>
								<text>置</text>
							</view>
							<view class="action search" @click="project_search()">
								<text>查</text>
								<text>询</text>
							</view>
						</view>
					</view>
					<view class="body">
						<mescroll-uni ref="mescrollRef1" height="830" :fixed="false" @init="mescrollInit1" @up="upCallback1" :up="upOption" :down="{ use: false }" class="wrapper _scroll">
							<view class="item" v-for="(item, idx) in peccancyList" :key="idx" @click="handleSelectPeccancy(item, idx)">
								<view :class="`check ${selectedPeccancy.indexOf(idx) !== -1 ? 'check__active' : ''}`">
									<view class="check-on"></view>
								</view>
								<view class="name">{{ item.peccancy_content }}</view>
							</view>
						</mescroll-uni>
					</view>
					<view class="custom-button" @click="confirmSelectPeccancy()">确认（{{ selectedPeccancy.length }}）</view>
				</view>
			</view>
		</u-popup>
		<view class="problem-wrapper" v-if="type !== 'center'">
			<div style="height: 20rpx;width: 100%;"></div>
			<problemList
				ref="problemList"
				@handleSelect="handleSelect"
				:checkMode="true"
				:userName="userInfo.nick_name"
				:height="curTab.id === 1 ? 'calc(100vh - 400rpx)' : 'calc(100vh - 300rpx)'"
				:fixed="false"
				:noTitle="curTab.id === 1"
				:id="curProject.id"
				:type="curTab.name"
				:state="curTab.id === 1 ? '1' : '2'"
				:check_type = check_type
			></problemList>
		</view>
		<view class="problem-wrapper" v-if="type === 'center'">
			<problemList
				ref="problemList"
				@handleSelect="handleSelect"
				:checkMode="true"
				:userName="userInfo.nick_name"
				height="calc(100vh - 410rpx)"
				:fixed="false"
				:id="curProject.id"
				type="二级巡查"
				state="1"
			></problemList>
		</view>
		<view class="footer-space" v-if="curTab.id === 1 || type == 'center'"></view>

		<view class="footer" v-if="curTab.id === 1 || type == 'center'">
			<view class="record" @click="showHistory = true">
				<view class="iconfont icon-lishijilu_huaban"></view>
				<text>历史记录</text>
			</view>
			<view class="submits">
				<view style="background-color: #999;" class="submit" @click="handleCheck('3')">
					删除
				</view>
				<view class="submit" @click="handleCheck('2')">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { addProject, getViolation, getProject, checkReferApi } from '@/api/patrol.js'
import { mapGetters } from 'vuex'
import projectSelect from '@/components/project_select/index.vue'
import zrrSelect from '@/components/zrr_select/index.vue'
import problemList from '@/components/problem_list/index.vue'
import problemItem from '@/components/problem_item/index.vue'
import { uploadUrl } from '@/baseUrl.js'
export default {
	components: {
		problemList,
		zrrSelect,
		projectSelect,
		problemItem
	},
	data() {
		return {
			one: '',
			total: 0,
			two: '',
			three:true,
			status: 'loading',
			nomore: false,
			project_name: '', //项目搜索字段
			check_type:"",
			typeList: [
				[
					{
						dict_label: '无'
					},
					{
						dict_label: 'Ⅰ'
					},
					{
						dict_label: 'Ⅱ'
					},
					{
						dict_label: 'Ⅲ'
					},
					{
						dict_label: 'Ⅳ'
					},
					{
						dict_label: 'Ⅴ'
					}
				]
			],
			curType: '', //等级
			selectLevel: '', //列表等级ID
			curTab: {
				id: 1,
				name: '业主检查'
			},
			tabList: [
				{
					name: '二级巡查',
					id: 3
				},
				{
					name: '省公司督察',
					id: 2
				},
				{
					name: '业主检查',
					id: 1
				},
				{
					name: '监理检查',
					id: 4
				},
				{
					name: '施工巡查',
					id: 5
				}
			],
			showType: false,
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			mescroll1: null, // mescroll实例对象 (此行可删,mixins已默认)
			upOption: {
				textNoMore: '-- 没有更多了 --'
			},
			pageSize: 20,
			fileList: [],
			showQuestion: false,
			radiolist: [
				{
					id: 1,
					name: '质量',
					disabled: false
				},
				{
					id: 2,
					name: '安全',
					disabled: false
				},
				// {
				// 	id:3,
				// 	name: '资料',
				// 	disabled: true
				// },
				{
					id: 4,
					name: '其他',
					disabled: true
				}
			],
			form: {
				check_type_name: '',
				check_type: '',
				check_content: '',
				zrr_name: '',
				fk_money: '',
				peccancy_content: '',
				peccancy_id: ''
			},
			showPeccancy: false,
			showHistory: false,
			peccancyList: [],
			historyList: [],
			selectedPeccancy: [],
			checked: false,
			userList: [],
			selectedUser: [],
			showUser: false,
			userList: [],
			selectList: [],
			type: 'manager'
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject',
			userInfo: 'system/getUserInfo',
			curRole: 'system/getCurRole'
		})
	},
	methods: {
		_setCurType(e) {
			this.curType = e.value[0].dict_label
			this.showType = false
			if (this.curType != this.selectLevel) {
				this.peccancyList = []
				this.selectedPeccancy.length = 0
				this.form.peccancy_content = ''
			}
		},
		go(url) {
			uni.navigateTo({
				url
			})
		},
		handleSelect(list) {
			this.selectList = list
		},
		handleSelectAll(e) {
			if (e) {
				this.selectedUser = this.userList.map(item => item.user_id)
			} else {
				this.selectedUser = []
			}
		},
		handleCheck(state) {
			if (this.selectList != '') {
				const _type = state
				if (state == '3') {
					uni.showModal({
						title: '确定删除？',
						success: async res => {
							if (res.confirm) {
								check(_type)
							}
						}
					})
				} else {
					uni.showModal({
						title: '确定提交？',
						success: async res => {
							if (res.confirm) {
								check(_type)
							}
						}
					})
				}

				const check = type => {
					checkReferApi({
						ids: this.selectList.join(','),
						state: _type
					}).then(res => {
						if (res.data.code == 1 || res.data.code == 200) {
							uni.showToast({
								title: '操作成功',
								duration: 1000,
								icon: 'success',
							})
							uni.hideLoading()
							this.selectList=''
							this.$refs.problemList.initData()
						} else {
							uni.showToast({
								title: '操作失败',
								duration: 1000,
								icon: 'error'
							})
							uni.hideLoading()
							this.selectList=''
						}
					})
					
				}
			}
		},

		setCurTab(item) {
			this.curTab = item
		},
		closePeccancy() {
			this.showPeccancy = false
		},

		handleSelectPeccancy(item, idx) {
			this.selectLevel = item.peccancy_level
			this.selectedPeccancy = [idx]
		},
		confirmSelectPeccancy() {
			if (!this.selectedPeccancy.length) {
				this.closePeccancy()
				return
			}
			let item = this.peccancyList.filter((item, idx) => this.selectedPeccancy.indexOf(idx) !== -1)[0]
			this.form.peccancy_id = item.id
			this.curType = this.selectLevel
			this.form.peccancy_content = item.peccancy_content
			this.closePeccancy()
		},
		closeUser() {
			this.showUser = false
		},
		onConfirm(res) {
			this.closeUser()
			this.userList = res
			let str = res.map(item => item.nick_name).join(',')
			let ids = res.map(item => item.id).join(',')

			this.form.zrr_name = str
			this.form.zrr_id = ids
		},
		handleShowQuestion() {
			this.showQuestion = true
			// this.fetchUser();
			this.fileList = []
			// if (this.peccancyList.length === 0) {
			//  	this.handleGetViolation();
			// }
		},
		project_rep() {
			this.project_name = ''
			this.project_search()
		},
		weizhangList() {
			this.showPeccancy = true
		},
		async project_search() {
			var that = this
			let res = await getViolation({
				// lvl: this.curType == '无'?'': this.curType,
				peccancy_content: this.project_name,
				page: 1
			})
			if (res.data.code == 1) {
				// that.total = res.data.data.total
				that.peccancyList = res.data.data.data
				// if (that.peccancyList.length == that.total) {
				// 	that.status = "noMore";
				// 	that.nomore = true;
				// }
			}
		},
		async handleGetViolation() {
			uni.showLoading({
				title: '加载中...'
			})
			const { data } = await getViolation({
				lvl: this.curType == '无' ? '' : this.curType,
				peccancy_content: this.project_name,
				page: 1
			})
			uni.hideLoading()
			if (data.code === 1) {
				this.peccancyList = data.data.data
			}
		},
		getHistory() {
			this.showHistory = true
		},
		/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
		mescrollInit(mescroll) {
			this.mescroll = mescroll
		},
		mescrollInit1(mescroll1) {
			this.mescroll1 = mescroll1
		},

		/*上拉加载的回调*/
		async upCallback(page) {
			const { data } = await getProject({
				project_id: this.curProject.id,
				pageSize: this.pageSize,
				page: page.num,
				state: '2',
				check_source: this.curTab.name,
				user_name: this.userInfo.nick_name
			})
			if (data.code === 1 || data.code === 200) {
				// 接口返回的当前页数据列表 (数组)
				let curPageData = data.data.data
				curPageData.forEach((item, idx) => {
					curPageData[idx].code = idx + 1 + (page.num - 1) * this.pageSize
				})
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = data.data.last_page
				//设置列表数据
				if (page.num == 1) this.historyList = [] //如果是第一页需手动置空列表
				this.historyList = this.historyList.concat(curPageData) //追加新数据
				// 请求成功,隐藏加载状态
				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				this.mescroll.endByPage(curPageLen, totalPage)
				setTimeout(() => {
					this.mescroll.endSuccess(curPageLen)
				}, 20)
			} else {
				//  请求失败,隐藏加载状态
				this.mescroll.endErr()
			}
		},

		/*上拉加载的回调*/
		async upCallback1(page) {
			const { data } = await getViolation({
				lvl: this.curType == '无' ? '' : this.curType,
				peccancy_content: this.project_name,
				page: page.num
			})
			if (data.code === 1 || data.code === 200) {
				// 接口返回的当前页数据列表 (数组)
				let curPageData = data.data.data
				curPageData.forEach((item, idx) => {
					curPageData[idx].code = idx + 1 + (page.num - 1) * this.pageSize
				})
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = data.data.last_page
				//设置列表数据
				if (page.num == 1) this.peccancyList = [] //如果是第一页需手动置空列表
				this.peccancyList = this.peccancyList.concat(curPageData) //追加新数据
				// 请求成功,隐藏加载状态
				//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				this.mescroll1.endByPage(curPageLen, totalPage)
				setTimeout(() => {
					this.mescroll1.endSuccess(curPageLen)
				}, 20)
			} else {
				//  请求失败,隐藏加载状态
				this.mescroll1.endErr()
			}
		},

		groupChange(n) {
			this.form.check_type_name = n
		},
		radioChange(n) {
			this.form.check_type = n
			this.two = n
		},
		// 删除图片
		deletePic(event) {
			this[`fileList`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList`].length
			lists.map(item => {
				this[`fileList`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList`][fileListLen]
				this[`fileList`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id,
						file_path: result.data.file_path
					})
				)
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: uploadUrl, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(JSON.parse(res.data))
						}, 1000)
					}
				})
			})
		},
		submit() {
			this.form.project_id = this.curProject.id
			// this.form.check_type = this.form.check_type_name == '质量问题' ? 1 : 2;
			this.form.check_type = this.form.check_type
			this.form.check_type_name = this.form.check_type_name
			this.form.check_photo_id = this[`fileList`].length > 0 ? this[`fileList`].map(o => o.url).join(',') : ''
			this.form.file_path = this[`fileList`].length > 0 ? this[`fileList`].map(o => o.file_path).join(',') : ''
			this.form.check_user = this.userInfo.nick_name
			// if (![1, 2].includes(this.form.check_type)) {
			// 	uni.showToast({
			// 		title: '请选择问题类型',
			// 		duration: 1000,
			// 		icon: 'error'
			// 	});
			// 	return
			// }

			// if (this.form.check_content == '') {
			// 	uni.showToast({
			// 		title: '请填写问题描述',
			// 		duration: 1000,
			// 		icon: 'error'
			// 	});
			// 	return
			// }
			// if (this.form.zrr_name == '') {
			// 	uni.showToast({
			// 		title: '请选择责任人',
			// 		duration: 1000,
			// 		icon: 'error'
			// 	});
			// 	return
			// }
			let obj = {
				...this.form,
				check_source: this.curRole === '项目经理' ? '业主检查' : '二级巡查',
				project_name: this.curProject.project_name
			}
			uni.showLoading({
				title: '加载中...'
			})
			addProject({
				...obj
			}).then(res => {
				if (res.data.code == 1 || res.data.code == 200) {
					uni.showToast({
						title: '操作成功',
						duration: 1000,
						icon: 'success'
					})
					for (let key in this.form) {
						this.form[key] = ''
					}
					this.showQuestion = false
					this.$refs.problemList.initData()
					uni.hideLoading()
				} else {
					uni.showToast({
						title: '操作失败',
						duration: 1000,
						icon: 'error'
					})
					uni.hideLoading()
				}
			})
		},
		closeQuestionPop() {
			this.showQuestion = false
		}
	},
	onLoad(data) {
		this.type = data.type
		if (this.type === 'center') {
			this.curTab = {
				name: '二级巡查',
				id: 3
			}
		}
		if(this.type=="检查"){
			this.three=false
			this.form.check_type = 1
			this.form.check_type_name = "质量"
		}
	}
}
</script>

<style lang="scss" scoped>
.actions {
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0px 25px;

	.checkbox {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 8rpx;
		color: #333;
		width: 200rpx;
		padding-top: calc((62rpx - 18px) / 2);
	}
}

/deep/ {
	.u-index-list__letter__item__index {
		color: #fff !important;
	}
}

.user-pop {
	.body {
		padding: 40rpx 50rpx;

		.wrapper {
			width: 100%;
			height: 740rpx;
			overflow-y: auto;
			overflow-x: hidden;
		}

		.item {
			width: auto;
			height: 60rpx;
			@include clear();

			.check {
				width: 24rpx;
				height: 24rpx;
				border: solid 1rpx #000000;
				border-radius: 50%;
				float: left;
				margin-top: 16rpx;
				position: relative;

				.check-on {
					transition: 0.3s ease;
					opacity: 0;
					transform: scale(0.5);
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 18rpx;
					height: 18rpx;
					background-color: #000000;
				}
			}

			.name {
				float: left;
				width: calc(100% - 24rpx - 40rpx);
				font-size: 26rpx;
				font-weight: 300;
				padding: 15rpx 0;
				font-stretch: normal;
				line-height: 30rpx;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #000000;
				margin-left: 20rpx;
			}

			.check__active {
				.check-on {
					opacity: 1;
					transform: scale(1);
				}
			}
		}
	}
}

.problem-pop {
	height: 70vh;
	overflow-y: auto !important;
}

.section-1 {
	width: 100%;
	height: calc(100vh - 450rpx);
	border-radius: 50rpx;
	background-color: #fafbfd;
	padding-top: 50rpx;
	padding-bottom: 20rpx;
	box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
	position: relative;
	top: 0;
}

.example-body {
	border: 1px solid #0066cc;
}

.picker {
	width: 80%;
	height: 48rpx;
	border-radius: 20rpx;
	border: solid 2rpx #0535d6;
	line-height: 44rpx;

	text {
		font-size: 26rpx;
		letter-spacing: 0rpx;
		color: #46464a;
		margin-left: 28rpx;
	}

	.iconfont {
		float: right;
		font-size: 32rpx;
	}
}

.form-item {
	width: 600rpx;
	height: 48rpx;
	line-height: 48rpx;
	margin: 0 auto;
	margin-bottom: 25rpx;
	display: flex;
	align-items: center;

	&:last-child {
		margin-bottom: 34rpx;
	}

	&.upload-wrap {
		align-items: unset;
		height: unset;
		line-height: unset;
	}

	@include clear();

	.label {
		float: left;
		width: 130rpx;
		height: 48rpx;
		text-align: left;
		line-height: 44rpx;
		font-size: 26rpx;
		color: #46464a;
	}

	/deep/ .u-upload__wrap {
		// width: calc(100% - 206rpx) !important;
		width: calc(100%) !important;
		background-color: transparent;
	}

	.icon-tupian {
		position: absolute;
		right: 25rpx;
		line-height: 44rpx;
		color: #1534ce;
		font-size: 28rpx;
	}

	/deep/ .u-radio-label--left {
		margin-right: 55rpx;
	}

	/deep/ .u-radio__text {
		font-size: 26rpx !important;
		color: #46464a !important;
	}

	.input {
		float: left;
		width: calc(100% - 134rpx - 3rpx);
		border-radius: 20rpx;
		border: solid 2rpx #1534ce;

		.input-body {
			box-sizing: border-box;
			width: 100%;
			height: 44rpx;
			padding: 0 !important;
			border: none;
			padding-left: 30rpx !important;
			padding-right: 30rpx !important;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: rgba(0, 0, 0, 0.7);
		}

		.input-placeholder {
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: rgba(0, 0, 0, 0.5);
		}
	}
}

.problem-list {
	width: 100%;

	.item {
		border-bottom: solid 2rpx #e2e7f5;
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.project {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.img {
		width: 100%;
		height: 248rpx;
		background-color: #000000;
		border-radius: 35rpx;
		position: relative;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

		.problem-title {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 65rpx;
			background-color: rgba(0, 0, 0, 0.7);
			text-align: center;
			line-height: 65rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 3rpx;
			color: #ffffff;
		}
	}

	.info {
		margin-top: 15rpx;
		margin-bottom: 30rpx;
		@include clear();

		.info-item {
			float: left;
			width: 25%;

			.label {
				height: 30rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 16rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 30rpx;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-bottom: 3rpx;
			}

			.content {
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #46464a;
			}
		}
	}
}

.pop {
	width: 671rpx;
	padding-bottom: 40rpx;
	background-color: #fff;
	border-radius: 35rpx;
	overflow: hidden;

	.title {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1534ce;
		font-size: 42rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 4rpx;
		color: #ffffff;
		text-align: center;
	}
}

.form {
	width: 100%;
	padding: 0 75rpx;
	padding-top: 0rpx;
	box-sizing: border-box;
	position: relative;

	.area-container {
		position: absolute;
		top: 110rpx;
		left: 75rpx;
		z-index: 10;
		width: 600rpx;
		background-color: #1433cd;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		padding-bottom: 12rpx;

		&::before {
			position: absolute;
			top: -12rpx;
			left: 32rpx;
			content: '';
			border-bottom: 12rpx solid #1433cd;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
		}

		.item {
			padding: 0 18rpx;
			height: 44rpx;
			background-color: #fafbfd;
			border-radius: 20rpx;
			margin-bottom: 12rpx;
			color: #1433cd;
			font-size: 26rpx;
			text-align: center;
			line-height: 44rpx;
			float: left;
			margin-right: 12rpx;
		}

		.item__active {
			background-color: orange;
			color: #fff;
		}
	}

	.form-item2 {
		width: 500rpx;
		height: 48rpx;
		border-radius: 20rpx;
		border: solid 2rpx #1534ce;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 30rpx;
		@include clear();

		.label {
			float: left;
			width: 134rpx;
			height: 48rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #1534ce;
		}

		.shape {
			width: 3rpx;
			height: 32rpx;
			background-color: #7f98ae;
			float: left;
			margin-top: 8rpx;
		}

		.input {
			float: left;
			width: calc(100% - 134rpx - 3rpx);

			.input-body {
				box-sizing: border-box;
				width: 100%;
				height: 44rpx;
				padding: 0 !important;
				border: none;
				padding-left: 30rpx !important;
				padding-right: 30rpx !important;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.7);
			}

			.input-placeholder {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}

	.actions {
		width: 100%;
		height: 50rpx;
		margin-top: 29rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: space-between;

		.action {
			width: 288rpx;
			height: 48rpx;
			background-color: #395cf5;
			border-radius: 20rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 48rpx;
			color: #ffffff;

			text {
				&:first-child {
					margin-right: 20rpx;
				}
			}
		}

		.search {
			background-color: #1534ce;
		}
	}

	.form-item {
		width: 600rpx;
		height: 48rpx;
		border-radius: 20rpx;
		border: solid 2rpx #1534ce;
		margin: 0 auto;
		margin-bottom: 34rpx;
		@include clear();

		.label {
			float: left;
			width: 77rpx;
			height: 48rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #1534ce;
		}

		.shape {
			width: 3rpx;
			height: 32rpx;
			background-color: #7f98ae;
			float: left;
			margin-top: 8rpx;
		}

		.input {
			float: left;
			width: calc(100% - 77rpx - 80rpx - 3rpx);

			.input-body {
				box-sizing: border-box;
				width: 100%;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #1534ce;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		.action {
			float: left;
			width: 80rpx;
			line-height: 44rpx;
			height: 44rpx;
			text-align: center;
			font-size: 32rpx;
			color: #1534ce;
			transition: 0.3s ease;
		}

		.action__active {
			transform: rotate(180deg);
		}
	}

	.size2 {
		.label {
			width: 77rpx;
		}

		.input {
			width: calc(100% - 77rpx - 3rpx);
			position: relative;

			.iconfont {
				position: absolute;
				right: 25rpx;
				top: 7rpx;
				font-size: 30rpx;
				color: #dad9df;
			}
		}
	}
}

.footer-space {
	height: 150rpx;
}

.footer {
	
	box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
	width: 100%;
	height: 150rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.record {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.icon-lishijilu_huaban {
			font-size: 43rpx;
			color: #3b3c40;
		}

		text {
			font-size: 26rpx;
			color: #3b3c40;
			margin-top: 10rpx;
		}
	}

	.submits {
		width: 430rpx;
		display: flex;
		justify-content: space-between;

		.submit {
			width: 200rpx;
			height: 83rpx;
			background-color: #1534ce;
			border-radius: 20rpx;
			letter-spacing: 10rpx;
			color: #ffffff;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.content {
	background-color: #e6e6e6;
}

.section-0 {
	width: 100%;
	background: #2e5efe;

	.problem-container {
		border-top: 30rpx solid #e6e6e6;
		border-bottom: 2rpx solid #e6e6e6;
		@include clear();

		.action {
			float: right;
			margin-right: 56rpx;
			margin-top: 10rpx;
			text-align: center;
			width: 176rpx;
			height: 60rpx;
			background-color: #1534ce;
			border-radius: 30rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 60rpx;
			letter-spacing: 6rpx;
			color: #ffffff;

			.iconfont {
				font-size: 26rpx;
				line-height: 60rpx;
			}
		}

		.title {
			display: inline-block;
			font-size: 26rpx;
			color: #000000;
			font-weight: bold;
			line-height: 80rpx;
			height: 80rpx;
			margin-left: 30rpx;
			position: relative;

			.shape {
				position: absolute;
				bottom: -6rpx;
				width: 100%;
				height: 8rpx;
				background-color: #1534ce;
				border-radius: 8rpx;
				transition: 0.3s ease;
			}
		}
	}

	.section-body {
		width: 100%;
		height: 100%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;

		.top-tab {
			width: 670rpx;
			margin-left: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 30rpx;
			border-bottom: solid 3rpx #f2f2f0;

			.item {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 80rpx;
				letter-spacing: 0rpx;
				color: #d8d8d5;
				position: relative;

				.shape {
					opacity: 0;
					transform: translateY(6rpx);
					position: absolute;
					bottom: -6rpx;
					width: 100%;
					height: 8rpx;
					background-color: #1534ce;
					border-radius: 8rpx;
					transition: 0.3s ease;
				}
			}

			.item__active {
				color: #3b3c40;

				.shape {
					opacity: 1;
					transform: translateY(0rpx);
				}
			}
		}
	}
}

.center-section-0 {
	background-color: #1332cd;

	.problem-container {
		border-top: 0;
	}
}
</style>
